<template>
  <BaseMainSlot>
    <template v-slot:content>
      <div>
        <el-descriptions title="" direction="vertical" :column="3" border>
          <el-descriptions-item label="主体名称">{{ homeBaseName }}</el-descriptions-item>
          <el-descriptions-item label="主体地址">
            <span v-show="isEdit">{{ formData.address ? formData.address : '' }}</span>
            <el-input size="mini" v-show=!isEdit v-model="formData.address" placeholder="请输入主体地址"></el-input>
          </el-descriptions-item>
          <el-descriptions-item label="负责人">
            <span v-show="isEdit">{{ formData.principal ? formData.principal : '' }}</span>
            <el-input size="mini" v-show=!isEdit v-model="formData.principal"
              placeholder="请输入主体负责人"></el-input></el-descriptions-item>
          <el-descriptions-item label="主体资质" :span="3">
            <div class="imgList" v-if="showHomeBaseInfo">
              <div class="imgItem" v-for="urlObj, index in imageList" :key="index"><img :src="urlObj.imgUrl" alt="">
                <i v-show="!isEdit" @click="delImg(index)" class="el-icon-close closeIcon"></i>
              </div>
              <div class="imgItem" v-show="!isEdit">
                <uploadimage ref="UploadImage" class="imgBox" @child-event="getimageurl" />

                <UpLoadImage  :limit="5" @getFileIdList="getFileIdList" :idList="fileIdList">
              </UpLoadImage>
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="margin-top:20px">
        <el-button type="primary" v-show="isEdit" @click="isEdit = !isEdit">编辑</el-button>
        <el-button type="primary" v-show="!isEdit" @click="edit">保存</el-button>
        <el-button type="primary" v-show="!isEdit" plain @click="cancel">取消</el-button>
      </div>
    </template>
  </BaseMainSlot>
</template>

<script>
import demoApi from "@/api/document";
import DocumentApi from "@/api/document";
import uploadimage from "@/components/uploadimage/uploadimage.vue";
import UpLoadImage from "@/components-production-management/UpLoadImage";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new2.vue";
import subjectInfoApi from "@/api/traceability/basicsInfo/subjectInfo";
import { blobToBase64 } from "@/utils/convert";
export default {
  name: "BatchCreate",
  components: { BaseMainSlot, uploadimage, UpLoadImage },
  data() {
    return {
      showHomeBaseInfo: true,
      fileIdList:[],
      imageList: [],
      formData: {
        address: '',
        pictureIdArr: '',
        principal: '',
        homeBaseName: ''
      },
      isEdit: true,
      imgList: [],
      homeBaseName: sessionStorage.getItem('homeBaseName')
    };
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this.queryByHomeBaseId()
  },
  methods: {
    setTime() {
      this.showHomeBaseInfo = false
      setTimeout(() => {
        this.showHomeBaseInfo = true
      }, 100)
    },
    delImg(index) {
      this.imageList.splice(index, 1)
      this.setTime()
    },
    edit() {
      if (this.imageList.length > 0) {
        let pictureIdArr = []
        this.imageList.forEach(imgObj => {
          pictureIdArr.push(imgObj.pictureId)
        })
        this.formData.pictureIdList = pictureIdArr
        this.formData.pictureIdArr = pictureIdArr.join(',')
      } else {
        this.formData.pictureIdList = []
        this.formData.pictureIdArr = ''
      }
      // debugger 
      subjectInfoApi.edit({
        ...this.formData,
        homeBaseName: this.homeBaseName
      }).then(res => {
        console.log(res)
        if (res.success) {
          this.isEdit = true
          this.$message.success('编辑成功')
        } else {
          this.$message.info('编辑失败')
        }
      })
    },
    queryByHomeBaseId() {
      subjectInfoApi.queryByHomeBaseId({
        homeBaseId: sessionStorage.getItem('homeBaseId')
      }).then(res => {
        if (res && res.data) {
          this.formData = {
            address: '',
            pictureIdArr: '',
            principal: '',
            homeBaseName: ''
          },
            this.formData = res.data
          this.homeBaseInfo = JSON.parse(JSON.stringify(res.data))
          this.imageList = []
          if (res.data.pictureIdList.length > 0) {
            res.data.pictureIdList.forEach(imgId => {
              this.imageList.push({
                pictureId: imgId,
                imgUrl: this.$baseurl.webServiceUrl + 'base/files/preview?fileId=' + imgId
              })
            })
          }
        }
      })
    },
    cancel() {
      this.isEdit = !this.isEdit
      this.formData = JSON.parse(JSON.stringify(this.homeBaseInfo))
      this.imageList = []
      if (this.formData.pictureIdList.length > 0) {
        this.formData.pictureIdList.forEach(imgId => {
          this.imageList.push({
            pictureId: imgId,
            imgUrl: this.$baseurl.webServiceUrl + 'base/files/preview?fileId=' + imgId
          })
        })
      }
      this.queryByHomeBaseId()
    },
    getFileIdList(data) {
      this.fileIdList = data.fileIdList;
      data.fileIdList.forEach(id => {
        this.imageList.push({
          pictureId: res.data,
          imgUrl: this.$baseurl.fileServiceUrl + 'base/files/preview?fileId=' + id
        })
      })
    },
    getimageurl(e) {
      let fd = new FormData();
      fd.append("file", e);
      demoApi.fileUpload(fd).then(res => {
        if (res.success) {
          this.imageList.push({
            pictureId: res.data,
            imgUrl: this.$baseurl.webServiceUrl + 'base/files/preview?fileId=' + res.data
          })
          console.log(this.imageList)
          this.showImg = false;
          this.$message.success("上传成功");
        } else this.$message.error(res.message);
      });
    },
    async fileDownload(fileId) {
      let res = fileId && await DocumentApi.fileDownload({ fileId })
      let img = await blobToBase64(res.data)
      this.imageList.push({
        pictureId: fileId,
        imgUrl: img
      });
      console.log(this.imageList)
    },
  }
};
</script>

<style lang="scss" scoped>
.imgList {
  max-height: 500px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-y: auto;

  .imgItem {
    font-size: 0;
    width: 300px;
    height: 200px;
    background: #ffffff;
    margin: 10px;
    border-radius: 4px;
    transition: all 0.5s;
    position: relative;

    .closeIcon {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 16px;
      color: #1083e7;
      cursor: pointer;
      background: #ffffff9d;
      border-radius: 50%;
      padding: 5px;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }

  .imgItem:hover {
    box-shadow: 0px 0px 10px 0px #5fadf2;
  }



  ::v-deep .imgBox {
    width: 300px;
    height: 200px;

    .xunzeimage,
    .imgUrl {
      width: 300px;
      height: 200px;

      img,
      div {
        height: 100%;
        width: 100%;
      }

      .el-icon-close {
        color: #000000;
        transform: translate(15px, -15px);
      }
    }

    .imgUrl {
      display: none;
    }
  }
}
</style>
